<!DOCTYPE html>
<html th:replace="~{layouts/layout :: layout(~{::title}, ~{::section})}" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>视频详情</title>
</head>
<section>
    <style>
        .desc {
            height: 260px;
            overflow-y: auto;
        }
        .badge {
            padding: 5px;
        }
        .tagWrapper {
            display: inline-block;
            margin: 2px;
        }
    </style>
    <div class="container">
        <input id="videoId" th:value="${video.getId()}" type="text" hidden>
        <div class="row">
            <div class="col-md-12">
                <div class="row">
                    <div class="col-md-8">
	                    <span class="h4" th:text="${video.getName()}"></span>
	                </div>
	                <div class="col-md-4 text-right">
	                    <a th:href="'/player?id='+${video.getId()}" class="btn btn-sm btn-success">播放</a>
	                    <a th:href="'/video/edit?id='+${video.getId()}" class="btn btn-sm btn-info">编辑</a>
	                    <button th:id="${video.getId()}" th:name="${video.getName()}" class="btn btn-sm btn-danger removeBtn">删除</button>
	                </div>
                </div>
	            <hr>
	            <div class="row">
                    <div class="col-md-4 mb-3">
                        <img width="100%" th:src="${video.getCover()}">
                    </div>
                    <div class="col-md-8">
                        <div class="row">
                            <div class="col-md-12">
                                <p class="desc p-3 border rounded" style="background: #fff" th:text="${video.getDescription()}"></p>
                            </div>
                        </div>
                        <div class="row mb-3">
		                    <div class="col-md-8">
		                        <div class="tagWrapper" th:each="tag : ${tags}">
			                        <a
			                            th:href="'/video/tagList?tagId=' + ${tag.getId()}"
			                            class="badge badge-secondary"
			                            th:text="${tag.getName()}"
		                            >
		                              标签
	                                </a>
	                                <a href="#" th:id="${tag.getId()}" class="badge badge-danger tagRemoveButton">x</a>
		                        </div>
							</div>
                            <div class="col-md-4 mt-2">
                                <div class="input-group is-invalid">
									<input id="tagInput" type="text" class="form-control form-control-sm">
									<div class="input-group-append">
									   <button id="tagAddButton" class="btn btn-sm btn-dark" type="button">添加标签</button>
									</div>
								</div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
	                            <table class="table">
	                                <tr>
	                                    <th>文件路径</th>
	                                    <td th:text="${video.getFilepath()}"></td>
	                                </tr>
	                                <tr>
                                        <th>时长</th>
                                        <td th:text="${video.getDuration()}"></td>
                                    </tr>
                                    <tr>
                                        <th>大小</th>
                                        <td th:text="${video.getSize()}"></td>
                                    </tr>
                                    <tr>
                                        <th>发布时间</th>
                                        <td th:text="${video.getReleaseDate()}"></td>
                                    </tr>
	                            </table>
                            </div>
                        </div>
                    </div>
	            </div>
            </div>
        </div>
    </div>
    
    <div class="modal fade" id="removeConfirmModal" tabindex="-1" role="dialog" aria-labelledby="removeConfirmModalLabel" aria-hidden="true">
	     <div class="modal-dialog" role="document">
	         <div class="modal-content">
	             <div class="modal-header">
	                 <h5 class="modal-title" id="removeConfirmModalLabel">删除确认</h5>
	                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
	                     <span aria-hidden="true">&times;</span>
	                 </button>
	             </div>
	             <div class="modal-body">
	                 是否删除 id: <b class="videoId"></b> ？
	                 <h5 class="videoName"></h5>
	             </div>
	             <div class="modal-footer">
	                 <a class="btn btn-danger removeLink">删除</a>
	                 <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
	             </div>
	         </div>
	     </div>
	 </div>
	 <script src="/js/remove.js"></script>
	 <script>
	   var tagInput = $('#tagInput');
	   $('#tagAddButton').click(function() {
		   if (!tagInput.val()) {
			   alert("空标签贴不上！");
		   } else {
			   var formData = new FormData();
			   formData.append("videoId", $('#videoId').val());
			   formData.append("tagName", tagInput.val());
			   
			   fetch('/tag/add', {
				   method: 'post',
				   body: formData,
			   }).then(function(data) {
				   return data.json();
			   }).then(function(status) {
				   if (status) {
					   location.reload();
				   } else {
					   alert("添加失败了！");
				   }
			   });
		   }
	   });
	   
	   var removeBtns = $('.tagRemoveButton');
	   for(var i = 0; i < removeBtns.length; i++) {
		   removeBtns.eq(i).click(function() {
			   var tagId = this.getAttribute('id');
			   var formData = new FormData;
			   formData.append("tagId", tagId);
			   formData.append("videoId", $('#videoId').val());
			   
			   fetch('/tag/remove', {
				   method:'post',
				   body: formData,
			   }).then(function(data) {
                   return data.json();
               }).then(function(status) {
                   if (status) {
                       location.reload();
                   } else {
                       alert("删除失败了！");
                   }
               });
		   });
	   }
	 </script>
</section>
</html>